<template>
    <view class="page">
        <u-navbar title="服务" :is-back="false" :title-color="'#ffffff'" :background="background"></u-navbar>
        <view class="u-wrap">
            <view class="slot-wrap">
                <u-search v-model="queryParams.key_name" :show-action="showAction" height="56" :clearabled="false"
                    :action-style="{color: '#fff'}" @search="search" @blur="blur" @clear="clear"
                    @change="input"></u-search>
            </view>
            <view class="u-menu-wrap" v-if="tabbar.length>0">
                <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
                    :scroll-into-view="itemId">
                    <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
                        :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
                        <text class="u-line-1">{{item.name}}</text>
                    </view>
                </scroll-view>
                <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
                    @scrolltolower="lowerBottom" @refresherrefresh="getFresh" @scroll="rightScroll">
                    <view class="page-view">
                        <view class="class-item">
                            <view class="item-container">
                                <view class="thumb-box" v-for="(item, index1) in navItem" :key="index1"
                                    @click="toDetail(item.id)">
                                    <image class="item-menu-image" :src="item.cover_pict" mode=""></image>
                                    <text class="one-omit">{{item.name}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view v-else style="padding-top: 300rpx;">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </view>
    </view>
</template>
<script>
    import {
        getCateLists,
        getContLists
    } from "@/api/service.js"
    import {
        getGoodsLists
    } from "../../api/mall"
    export default {
        data() {
            return {
                scrollTop: 0, //tab标题的滚动条位置
                oldScrollTop: 0,
                current: 0, // 预设当前项的值
                menuHeight: 0, // 左边菜单的高度
                menuItemHeight: 0, // 左边菜单item的高度
                itemId: '', // 栏目右边scroll-view用于滚动的id
                tabbar: [],
                menuItemPos: [],
                arr: [],
                scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
                timer: null, // 定时器
                inputValue: '', //搜索框内容
                queryParams: {
                    page: 1,
                    limit: 20,
                    key_name: '',
                    cate_id: 1
                },
                CateId: '',
                pageCount: '',
                navList: [],
                navItem: [],
                background: {
                    // 渐变色
                    backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
                },
            }
        },
        onLoad() {},
        onShow() {
            this.judgeLogin(() => {
                this.getList()
            })
        },
        onReady() {
            this.getMenuItemTop()
        },
        methods: {
            /**
             * 返回点击
             */
            onBack() {
                uni.navigateBack();
            },
            getList() {
                getCateLists(this.queryParams).then(res => {
                    this.tabbar = res.data
                    console.log(res, '分类列表')
                    // res.data.forEach(e => {
                    //     if (e.children) {
                    //         this.tabbar.push(e)
                    //     }
                    // });
                    if(!this.CateId){
                        this.CateId = this.tabbar[0].id
                    }
                    this.getGoodsLists();
                    const ID = uni.getStorageSync('id');
                    console.log(ID, "IDIDID")
                    if (ID) {
                        let index = this.tabbar.findIndex(item => item.id == ID)
                        this.swichMenu(index)
                        uni.removeStorageSync('id');
                    }
                })
            },
            getGoodsLists() {
                console.log(this.CateId, '分类id')
                this.queryParams.cate_id = this.CateId
                this.queryParams.page = 1
                getContLists(this.queryParams).then(res => {
                    console.log(res, '服务列表')
                    this.navItem = res.data.lists
                    this.pageCount = res.data.pageCount
                })
            },
            // 点击左边的栏目切换
            async swichMenu(index) {
                if (this.arr.length == 0) {
                    await this.getMenuItemTop();
                }
                if (index == this.current) return;
                this.scrollRightTop = this.oldScrollTop;
                this.$nextTick(function() {
                    this.scrollRightTop = this.arr[index];
                    this.current = index;
                    this.leftMenuStatus(index);
                    this.CateId = this.tabbar[index].id
                    this.getGoodsLists()
                })
            },
            // 获取一个目标元素的高度
            getElRect(elClass, dataVal) {
                new Promise((resolve, reject) => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('.' + elClass).fields({
                        size: true
                    }, res => {
                        // 如果节点尚未生成，res值为null，循环调用执行
                        if (!res) {
                            setTimeout(() => {
                                this.getElRect(elClass);
                            }, 10);
                            return;
                        }
                        this[dataVal] = res.height;
                        resolve();
                    }).exec();
                })
            },
            // 观测元素相交状态
            async observer() {
                this.tabbar.map((val, index) => {
                    let observer = uni.createIntersectionObserver(this);
                    // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
                    // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
                    observer.relativeTo('.right-box', {
                        top: 0
                    }).observe('#item' + index, res => {
                        if (res.intersectionRatio > 0) {
                            let id = res.id.substring(4);
                            this.leftMenuStatus(id);
                        }
                    })
                })
            },
            // 设置左边菜单的滚动状态
            async leftMenuStatus(index) {
                this.current = index;
                // 如果为0，意味着尚未初始化
                if (this.menuHeight == 0 || this.menuItemHeight == 0) {
                    await this.getElRect('menu-scroll-view', 'menuHeight');
                    await this.getElRect('u-tab-item', 'menuItemHeight');
                }
                // 将菜单活动item垂直居中
                this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
            },
            // 获取右边菜单每个item到顶部的距离
            getMenuItemTop() {
                new Promise(resolve => {
                    let selectorQuery = uni.createSelectorQuery();
                    selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
                        // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
                        if (!rects.length) {
                            setTimeout(() => {
                                this.getMenuItemTop();
                            }, 10);
                            return;
                        }
                        rects.forEach((rect) => {
                            // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
                            this.arr.push(rect.top - rects[0].top);
                            resolve();
                        })
                    }).exec()
                })
            },
            // 右边菜单滚动
            async rightScroll(e) {
                this.oldScrollTop = e.detail.scrollTop;
                if (this.arr.length == 0) {
                    await this.getMenuItemTop();
                }
                if (this.timer) return;
                if (!this.menuHeight) {
                    await this.getElRect('menu-scroll-view', 'menuHeight');
                }
                setTimeout(() => { // 节流
                    this.timer = null;
                    // scrollHeight为右边菜单垂直中点位置
                    let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
                    for (let i = 0; i < this.arr.length; i++) {
                        let height1 = this.arr[i];
                        let height2 = this.arr[i + 1];
                        // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
                        if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
                            // this.leftMenuStatus(i);
                            return;
                        }
                    }
                }, 10)
            },
            //触底加载
            lowerBottom() {
                //处理触底后的逻辑
                console.log("触底加载")
                let that = this
                that.queryParams.page = that.queryParams.page + 1
                if (that.queryParams.page > that.pageCount) return;
                this.queryParams.page = that.queryParams.page
                getContLists(this.queryParams).then((res) => {
                    console.log(res, "ressss")
                    for (let i = 0; i < res.data.lists.length; i++) {
                        that.navItem.push(res.data.lists[i])
                    }
                    that.pageCount = res.pageCount
                    console.log(that.navItem, '9999')
                })
            },

            // 下拉刷新
            getFresh() {
                console.log("下拉刷新")
                this.getGoodsLists()
            },
            toDetail(id) {
                console.log(id, "fuwuchuancan")
                uni.navigateTo({
                    url: "/pagesA/service/detail?id=" + id
                })
            },
            //点击搜索框，跳转到搜索页面，并带参
            searchClick() {
                uni.navigateTo({
                    url: '/pages/search/search',
                    params: {
                        searchValue: this.inputValue
                    }
                })
            },
            toPage(item) {
                uni.navigateTo({
                    url: '/pagesA/mall/classList?item=' + encodeURIComponent(JSON.stringify(item)),
                })
            },
            search(e) {
                console.log(e, "搜素")
                // uni.showToast({
                //     title: '搜索：' + res.value,
                //     icon: 'none'
                // })
            },
            input(res) {
                // console.log('----input:', res)
            },
            clear(res) {
               console.log(res, "搜素clear")
               this.queryParams.key_name = ''
               this.getGoodsLists()
            },
            blur(res) {
                console.log(res, "搜素blur")
                this.queryParams.key_name = res
                this.getGoodsLists()
                // this.$refs.paging.reload();
            },
        }
    }
</script>

<style lang="scss" scoped>
    .u-wrap {
        height: calc(100vh);
        /* #ifdef H5 */
        height: calc(100vh - var(--window-top));
        /* #endif */
        display: flex;
        flex-direction: column;
    }
    .slot-wrap {
        display: flex;
        align-items: center;
        padding-top: 30rpx;
    }
   .slot-wrap u-search {
        width: 90%;
        margin: 0 auto;
    }
    .u-search-box {
        padding: 18rpx 30rpx;
    }

    .u-menu-wrap {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    .u-search-inner {
        background-color: rgb(234, 234, 234);
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        padding: 10rpx 16rpx;
    }

    .u-search-text {
        font-size: 26rpx;
        color: $u-tips-color;
        margin-left: 10rpx;
    }

    .u-tab-view {
        width: 200rpx;
        height: 100%;
    }

    .u-tab-item {
        height: 110rpx;
        background: #f6f6f6;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        line-height: 1;
    }

    .u-tab-item-active {
        position: relative;
        color: $base;
        font-size: 30rpx;
        font-weight: 600;
        background: #fff;
    }

    .u-tab-item-active::before {
        content: "";
        position: absolute;
        border-left: 4px solid $base;
        height: 32rpx;
        left: 0;
        top: 39rpx;
    }

    .u-tab-view {
        height: 100%;
    }

    .right-box {
        background-color: rgb(250, 250, 250);
    }

    .page-view {
        padding: 16rpx;
    }

    .class-item {
        margin-bottom: 30rpx;
        background-color: #fff;
        padding: 16rpx;
        border-radius: 8rpx;
    }

    .class-item:last-child {
        min-height: 100vh;
    }

    .item-title {
        font-size: 26rpx;
        color: $u-main-color;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .item-container {
        display: flex;
        flex-wrap: wrap;
    }

    .thumb-box {
        width: 33.333333%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 20rpx;
    }

    .thumb-box text {
        width: 80%;
        text-align: center;
        margin: 18rpx 0;
        font-weight: normal;
        font-size: 24rpx;
        color: $u-main-color;
    }

    .item-menu-image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 6rpxw;
    }
</style>